툴팁 구현: 호버(Hover) 및 포커스(Focus)를 이용한 접근성 있는 정보 제공

툴팁은 사용자가 요소 위로 마우스 포인터를 올리거나(hover) 포커스(focus)할 때 나타나는 작은 상황별 도움말 메시지입니다. 추가 정보를 제공하거나, 요소의 목적을 명확히 하거나, 기능 사용법에 대한 힌트를 줄 수 있습니다. 하지만 툴팁은 올바르게 구현되지 않으면 쉽게 접근성 문제를 일으킬 수 있습니다. 이 가이드는 장애가 있는 사용자를 포함한 모든 사람이 사용할 수 있는 툴팁을 만드는 모범 사례를 설명합니다.

툴팁에서 접근성이 중요한 이유

접근성은 단순히 규정 준수에 관한 것이 아니라, 모두에게 더 나은 사용자 경험을 제공하는 것입니다. 툴팁에 접근성이 확보되지 않으면 스크린 리더, 키보드 탐색, 음성 입력과 같은 보조 기술에 의존하는 사용자가 배제될 수 있습니다. 다음 시나리오를 고려해 보세요:

• 스크린 리더 사용자: 툴팁이 적절하게 마크업되지 않으면 스크린 리더가 그 존재나 내용을 알려주지 않을 수 있습니다.
• 키보드 사용자: 툴팁이 마우스를 올렸을 때만 나타난다면 키보드 사용자는 접근할 수 없습니다.
• 운동 장애가 있는 사용자: 마우스를 올려야 하는 정밀한 움직임은 어렵거나 불가능할 수 있습니다.
• 인지 장애가 있는 사용자: 타이밍이 좋지 않거나 혼란스러운 툴팁은 좌절감을 유발하고 이해를 방해할 수 있습니다.

접근성 모범 사례를 따르면 툴팁이 모든 사용자의 경험을 방해하는 대신 향상시킬 수 있습니다.

접근성 있는 툴팁의 핵심 원칙

다음 원칙들은 접근성 있는 툴팁을 만드는 데 매우 중요합니다:

1. 대체 접근 방법 제공: 툴팁이 호버와 키보드 포커스 모두를 통해 접근 가능하도록 보장해야 합니다.
2. ARIA 속성 사용: ARIA(Accessible Rich Internet Applications) 속성을 사용하여 보조 기술에 툴팁을 올바르게 식별하고 설명해야 합니다.
3. 포커스 관리: 툴팁이 표시되고 숨겨질 때 포커스가 어디로 가는지 제어해야 합니다.
4. 충분한 대비 보장: 툴팁 텍스트와 배경 사이에 충분한 색상 대비를 제공해야 합니다.
5. 충분한 시간 허용: 사용자가 툴팁 내용을 읽을 충분한 시간을 주어야 합니다.
6. 닫을 수 있도록 만들기: 툴팁을 닫을 수 있는 명확한 방법을 제공해야 합니다.
7. 과도한 사용 피하기: 툴팁은 꼭 필요할 때만 아껴서 사용해야 합니다.

구현 기법

1. 호버(Hover)와 포커스(Focus) 사용하기

접근성 있는 툴팁의 가장 중요한 측면은 마우스와 키보드 사용자 모두가 접근할 수 있도록 하는 것입니다. 즉, 툴팁은 호버 상태와 요소가 포커스를 받았을 때 모두 나타나야 합니다.

HTML:

            <a href="#" aria-describedby="tooltip-example">Example Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">This is an example tooltip.</div>
            

              
                Copy
              
            
          

CSS:

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Ensure the tooltip is on top */
}

            

              
                Copy
              
            
          

설명:

• aria-describedby: 이 속성은 링크와 툴팁 요소를 ID를 사용하여 연결합니다. 이는 보조 기술에 툴팁이 링크에 대한 추가 정보를 제공한다는 것을 알려줍니다.
• role="tooltip": 이 ARIA 역할은 해당 요소를 툴팁으로 식별합니다.
• CSS는 인접 형제 선택자(+)를 사용하여 링크에 마우스를 올리거나 포커스가 되었을 때 툴팁을 표시합니다.

JavaScript (고급 제어 - 선택 사항):

CSS가 간단한 표시/숨김을 처리할 수 있지만, JavaScript를 사용하면 특히 툴팁이 동적으로 생성되거나 더 복잡한 동작이 필요할 때 더욱 강력한 제어가 가능합니다.

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. ARIA 속성 사용하기

ARIA 속성은 보조 기술에 의미론적 정보를 제공하는 데 필수적입니다. 주요 속성은 다음과 같습니다:

• aria-describedby: 앞서 언급했듯이, 이 속성은 트리거 요소와 툴팁 요소 간의 관계를 설정합니다.
• role="tooltip": 이 속성은 요소를 툴팁으로 명시적으로 정의합니다.
• aria-hidden="true"/aria-hidden="false": 이를 사용하여 툴팁이 현재 보조 기술에 보이는지 여부를 나타냅니다. 툴팁이 숨겨져 있을 때는 aria-hidden="true"로 설정하고, 보일 때는 aria-hidden="false"로 설정합니다. 이는 특히 JavaScript를 사용하여 툴팁의 가시성을 제어할 때 중요합니다.

예시:

            <button aria-describedby="help-tooltip">Submit</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Click here to submit the form.</div>
            

              
                Copy
              
            
          

JavaScript (aria-hidden용):

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. 포커스 관리하기

툴팁이 나타날 때, 일반적으로 트리거 요소에서 포커스를 빼앗아서는 *안 됩니다*. 포커스는 툴팁을 트리거한 요소에 그대로 남아 있어야 합니다. 이렇게 하면 키보드 사용자가 예기치 않은 중단 없이 페이지 탐색을 계속할 수 있습니다.

하지만, 특히 툴팁에 상호작용 가능한 요소(예: 링크, 버튼)가 포함된 경우, 포커스를 툴팁으로 옮기고 싶을 때가 있을 수 있습니다. 이 경우 다음 사항을 확인해야 합니다:

• 툴팁이 포커스를 받았음을 나타내기 위해 시각적으로 구별되어야 합니다.
• 원래 트리거 요소로 포커스를 되돌릴 명확한 방법(예: 툴팁 내 닫기 버튼)이 있어야 합니다.

대부분의 경우, 단순성과 사용성을 위해 툴팁 자체 내에서 포커스 관리를 피하는 것이 좋습니다.

4. 충분한 대비 보장하기

색상 대비는 가독성에 매우 중요합니다. 툴팁의 텍스트 색상이 배경색과 충분한 대비를 이루는지 확인해야 합니다. WCAG(Web Content Accessibility Guidelines)는 일반 텍스트의 경우 최소 4.5:1, 큰 텍스트(18pt 또는 14pt 굵게)의 경우 3:1의 명암비를 권장합니다.

온라인 명암비 검사기를 사용하여 선택한 색상이 접근성 표준을 충족하는지 확인하세요. 명암비 검사기의 예는 다음과 같습니다:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

예시 (좋은 대비):

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

예시 (나쁜 대비):

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. 충분한 시간 허용하기

사용자는 툴팁 내용을 읽을 충분한 시간이 필요합니다. 너무 빨리 사라지는 툴팁은 피해야 합니다. 정해진 숫자는 없지만, 최소 몇 초의 표시 시간을 목표로 하세요. 또한, 사용자가 트리거 요소 위에 마우스를 올리거나 포커스를 맞추고 있는 동안에는 툴팁이 계속 표시되어야 합니다. 다른 이벤트로 인해 툴팁을 닫아야 하는 경우, 툴팁이 닫힐 것이라는 표시를 제공해야 합니다.

툴팁 내용이 긴 경우, 사용자가 수동으로 툴팁을 닫을 수 있는 방법(예: 닫기 버튼 또는 Escape 키 누르기)을 제공하는 것을 고려해야 합니다.

6. 닫을 수 있도록 만들기

툴팁은 사용자가 마우스를 멀리 옮기거나 포커스를 제거하면 자동으로 사라지는 경우가 많지만, 특히 내용이 길거나 상호작용 요소가 포함된 툴팁의 경우 수동으로 닫을 수 있는 명확한 방법을 제공하는 것이 좋습니다.

툴팁 닫기 방법:

• 닫기 버튼: 툴팁 내에 시각적으로 눈에 띄는 닫기 버튼을 포함합니다.
• Escape 키: 사용자가 Escape 키를 눌러 툴팁을 닫을 수 있도록 허용합니다.
• 외부 클릭: 사용자가 툴팁과 트리거 요소 외부의 아무 곳이나 클릭하면 툴팁을 닫습니다. (방해가 될 수 있으므로 주의해서 사용해야 합니다).

예시 (닫기 버튼):

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  This is my tooltip content.
  <button onclick="hideTooltip()">Close</button>
</div>
            

              
                Copy
              
            
          

예시 (Escape 키):

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Replace with your actual hide tooltip function
  }
});

            

              
                Copy
              
            
          

7. 과도한 사용 피하기

툴팁은 아껴서 사용해야 하며, 정말로 유용한 정보를 제공할 때만 사용해야 합니다. 툴팁을 과도하게 사용하면 인터페이스가 복잡해지고 사용자의 주의를 산만하게 하며 실망스러운 경험을 만들 수 있습니다.

툴팁의 대안:

• 명확한 레이블: 양식 필드, 버튼, 링크에 명확하고 설명적인 레이블을 사용합니다.
• 상황별 도움말: 관련 요소 근처의 인터페이스 내에 직접 도움말 텍스트를 제공합니다.
• 도움말 문서: 더 복잡한 기능에 대해서는 포괄적인 도움말 문서로 링크합니다.

고급 고려사항

동적 콘텐츠

툴팁 콘텐츠가 동적으로 생성되는 경우(예: API에서 로드되거나 사용자 입력에 따라 업데이트되는 경우), aria-describedby 속성과 툴팁 가시성이 그에 따라 업데이트되도록 해야 합니다. JavaScript를 사용하여 이러한 업데이트를 관리하세요.

위치 지정

툴팁의 위치를 신중하게 고려하세요. 중요한 콘텐츠를 가리거나 레이아웃 변경을 유발하는 방식으로 배치하지 마세요. 다양한 화면 크기와 해상도를 염두에 두고 CSS를 사용하여 툴팁이 항상 뷰포트 내에 표시되도록 하세요.

모바일 기기

툴팁은 전통적으로 호버 상호작용에 의존하는데, 이는 터치 기반 장치에서는 사용할 수 없습니다. 모바일 장치의 경우 다음과 같은 대체 상호작용 방법을 사용하는 것을 고려하세요:

• 탭(Tap): 사용자가 요소를 탭하면 툴팁을 표시합니다.
• 길게 누르기(Long press): 사용자가 요소를 길게 누르면 툴팁을 표시합니다.
• 포커스 시 표시: 요소가 포커스를 받을 때 표시합니다. 이는 JavaScript를 사용하여 터치 지원 여부를 확인하고(예: ('ontouchstart' in window)) 그에 따라 표시 동작을 변경함으로써 달성할 수 있습니다.

툴팁 테스트하기

툴팁이 모든 사용자에게 접근 가능한지 철저히 테스트하세요. 수동 테스트와 자동화된 접근성 테스트 도구를 조합하여 사용하세요.

테스트 방법:

• 키보드 탐색: 키보드를 사용하여 툴팁에 접근할 수 있는지 확인합니다.
• 스크린 리더 테스트: 스크린 리더를 사용하여 툴팁이 올바르게 안내되는지 확인합니다.
• 색상 대비 분석: 색상 대비 검사기를 사용하여 충분한 대비를 확인합니다.
• 모바일 테스트: 다양한 모바일 기기와 화면 크기에서 툴팁을 테스트합니다.
• 자동화된 접근성 테스트: axe DevTools, WAVE 또는 Lighthouse와 같은 도구를 사용하여 잠재적인 접근성 문제를 식별합니다.

국제화(i18n) 및 현지화(l10n)

전 세계 사용자를 위한 툴팁을 개발할 때는 국제화 및 현지화를 염두에 두어야 합니다:

• 텍스트 방향: 왼쪽에서 오른쪽(LTR) 및 오른쪽에서 왼쪽(RTL) 텍스트 방향을 모두 지원합니다. 레이아웃에는 물리적 속성(예: margin-left, margin-right) 대신 CSS 논리적 속성(예: margin-inline-start, margin-inline-end)을 사용합니다.
• 언어별 번역: 다양한 언어에 대한 툴팁 콘텐츠 번역을 제공합니다.
• 날짜 및 시간 형식: 사용자의 로케일에 맞게 날짜 및 시간 형식을 조정합니다.
• 숫자 형식: 다른 지역에 맞는 적절한 숫자 형식(예: 소수점 구분 기호, 천 단위 구분 기호)을 사용합니다.

결론

접근성 있는 툴팁을 구현하려면 신중한 계획과 세부 사항에 대한 주의가 필요합니다. 이 가이드에 설명된 원칙과 기법을 따르면 능력에 관계없이 모든 사람이 사용할 수 있는 툴팁을 만들 수 있습니다. 접근성은 지속적인 과정이므로, 모든 사용자의 요구를 충족시키기 위해 툴팁을 계속 테스트하고 개선해야 한다는 점을 기억하세요.

참고 자료

• ARIA 저작 실무 가이드 (APG) - 툴팁
• 웹 콘텐츠 접근성 지침 (WCAG) 2.1
• MDN 웹 문서 - ARIA